<template>
  <div>
    <!-- 柱状图 -->
    <div class="histogram" style="min-width:600px;height:500px;margin-top:30px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts';
import { fetchapisa } from '@/api/table'
import { getStore } from '@/utils/common'

export default {
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    yinYang: {
      type: Object,
      default: () => {}
    },
    cutoffValue: {
      type: Number | String,
      default: ''
    }
  },
  data() {
    return {
      myChart: null,
      imgItem: ''
    }
  },
  watch: {
    data: {
      handler(value) {
        this.init(value)
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    init(data) {
      this.imgItem = ''
      this.$nextTick(async() => {
        // 柱状图
        const histogram = document.querySelector(".histogram");
        this.myChart = echarts.init(histogram);
        const { valeuDate, keys } = await this.setData(data)

        const option = {
          color: '#3398DB',
          title: {
            // text: this.$t('page.endHistogram'),
            left: 'left'
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          animation: false,
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          xAxis: [
            {
              type: "category",
              data: keys,
              axisTick: {
                alignWithLabel: true,
              },
            },
          ],
          yAxis: [
            {
              type: "value",
            },
          ],
          series: {
            type: "bar",
            barWidth: "60%",
            data: valeuDate.map((item, index) => {
              return {
                value: item,
                itemStyle: {
                  color: this.yinYang[keys[index]] == 0 ? '#6cbe6c' : '#ff8080'
                }
              }
            }),
            markLine: {
              data: [{ yAxis: this.cutoffValue, name: this.cutoffValue}]
            },
            label: {
              show: true,
              position: 'top'
            },
          }
        };

        setTimeout(() => {
          this.imgItem = this.myChart.getConnectedDataURL({
            pixelRatio: 2,  // 放大二倍下载
            backgroundColor: '#fff',
          })
          // this.$emit('shotImg', this.imgItem)
        }, 1)
        setTimeout(() => {
          fetchapisa({
            uuid: getStore('auuid') || '',
            imgBase64: [].concat(this.imgItem)
          })
        }, 3000);
        this.myChart.setOption(option);
      })
    },
    setData(data) {
      const valeuDate = []
      const keys = Object.keys(data).sort()
      keys.forEach((item, index) => {
        if(data[item]) {
          valeuDate.push(data[item])
        }
      })
      return {
        valeuDate,
        keys
      }
    },
    resizeMyChart() {
      this.myChart.resize()
    },
  },
  beforeDestroy () {
    this.myChart.clear()
    window.removeEventListener('resize', this.resizeMyChart)
  },
}
</script>

<style>

</style>